<!DOCTYPE html>
<html>
  <head>
    <title>tablebasic.html</title>
    <meta http-equiv=content-type content="text/html; charset=UTF-8">
	<link rel="shortcut icon" type="image/x-icon" href="../favicon.ico" />
    <link rel="stylesheet" type="text/css" href="../js/easyui/themes/bootstrap/easyui.css" />
    <link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css" />
	<link href="../js/jquery-validation/milk.css" type="text/css" rel="stylesheet" />
	<!-- js import -->
	<script type="text/javascript" src="../js/easyui/jquery-1.8.0.min.js"></script>
	<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../js/easyui/locale/easyui-lang-zh_CN.js"></script>
	<!-- 扩展easyui验证 -->
	<script type="text/javascript" src="../js/jquery-validation/jquery.validate.min.js"></script>
	<script type="text/javascript" src="../js/jquery-validation/messages_cn.js"></script>

	<script type="text/javascript">
	$().ready(function() {
 $("#signupForm").validate();
});
	</script>
  </head>
  
  <body>
  <div class="easyui-layout" style="width:100%;height:600px;">
      <div data-options="region:'north',split:true" style="height: 66px;">
			<span style="float: right; padding: 4px;"> 
				欢迎您：|
				<a href="#" onclick="updatePwd();" title="ddddd">修改密码</a>|
				<a href="#" onclick="logout();">退出系统</a> &nbsp;
			</span>
		</div>
  <div data-options="region:'west',split:true" title="菜单列表" style="width:200px;margin:2px 0;">
     dddd
  </div>
   <div data-options="region:'center',title:'列表'" style="width:100%;">
  <div class="easyui-panel" style="width:700px; border:0px dashed #000;" >
        <div style="padding:5px 10px 10px 60px">
        <form id="ff" method="post">
        <div class="easyui-accordion" >
            <div title="基本信息" style="overflow:auto; padding:10px;">
              <table cellpadding="2"  style="width:100%;">
                <tr>
                    <td>Name:</td>
                    <td><input class="easyui-validatebox" type="text" name="name" data-options="required:true"></input></td>
                </tr>
                <tr>
                    <td>Email:</td>
                    <td><input class="easyui-validatebox" type="text" name="email" data-options="required:true,validType:'email'"></input></td>
                </tr>
                </table>
             </div>
             <div title="扩展信息"  style="padding:10px;">
               <table cellpadding="2" style="width:100%;">
                <tr>
                    <td>Subject:</td>
                    <td><input class="easyui-validatebox" type="text" name="subject" data-options="required:true"></input></td>
                </tr>
                <tr style="background-color:#F2F2F2;">
                    <td>Message:</td>
                    <td><input name="message"></input></td>
                </tr>
                <tr>
                    <td>Language:</td>
                    <td>
                        <select class="easyui-combobox" name="language"><option value="ar">Arabic</option><option value="bg">Bulgarian</option><option value="ca">Catalan</option><option value="zh-cht">Chinese Traditional</option><option value="cs">Czech</option><option value="da">Danish</option><option value="nl">Dutch</option><option value="en" selected="selected">English</option><option value="et">Estonian</option><option value="fi">Finnish</option><option value="fr">French</option><option value="de">German</option><option value="el">Greek</option><option value="ht">Haitian Creole</option><option value="he">Hebrew</option><option value="hi">Hindi</option><option value="mww">Hmong Daw</option><option value="hu">Hungarian</option><option value="id">Indonesian</option><option value="it">Italian</option><option value="ja">Japanese</option><option value="ko">Korean</option><option value="lv">Latvian</option><option value="lt">Lithuanian</option><option value="no">Norwegian</option><option value="fa">Persian</option><option value="pl">Polish</option><option value="pt">Portuguese</option><option value="ro">Romanian</option><option value="ru">Russian</option><option value="sk">Slovak</option><option value="sl">Slovenian</option><option value="es">Spanish</option><option value="sv">Swedish</option><option value="th">Thai</option><option value="tr">Turkish</option><option value="uk">Ukrainian</option><option value="vi">Vietnamese</option></select>
                    </td>
                </tr>
               </table>
            </div>
          </div>
        </form>
        <div style="text-align:center;padding:2px">
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">保   存</a>
            <a href="javascript:void(0)" class="easyui-linkbutton">重   置</a>
        </div>
        </div>
    </div>
    <div style="margin:auto 0; padding:1px; border-top:1px dashed #000;width:100%;"></div>
    <input class="easyui-searchbox" style="width:300px;height:30px;" data-options="prompt:'请输入搜索关键字',menu:'#mm',searcher:doSearch"></input>
    <div id="mm">
        <div data-options="name:'all'">全部</div>
        <div data-options="name:'sports'">Sports News</div>
        <div data-options="name:'sports2'">Sports News2</div>
    </div>
    <div style="margin:5px 0;"></div>
    <table id="dg" title="XX列表" style="width:700px;height:340px; " data-options="fit:true,
                rownumbers:true,
                striped : true,
                singleSelect:true,
                autoRowHeight:false,
                pagination:true,
                pageSize:10, 
                rowStyler: function(index,row){
                    if (index%2==1){
                        return 'background-color:#F2F2F2;color:#000;font-weight:bold;';
                    }
                }">
        <thead>
            <tr>
                <th field="inv" width="80" align="center">Inv No</th>
                <th field="date" width="100" align="center">Date</th>
                <th field="name" width="80" align="center">Name</th>
                <th field="amount" width="80" align="right">Amount</th>
                <th data-options="field:'price',width:80,align:'right',formatter:formatPrice" width="80" align="right">Price</th>
                <th field="cost" width="100" align="right">Cost</th>
                <th field="note" width="110" align="center">操作</th>
            </tr>
        </thead>
    </table>
    </div>
    <div data-options="region:'south',split:true"  style="height: 30px;text-align: center; line-height: 25px; overflow: hidden;"> 
                                 --息系统统一平台 © 北京--软件技术有限公司版权所有
    </div>
  </div>  
    <script>
        function doSearch(value,name){
            alert('You input: ' + value+'('+name+')');
        }
        function submitForm(){
            $('#ff').form('submit');
        }
        
        function getData(){
            var rows = [];
            for(var i=1; i<=200; i++){
                var amount = Math.floor(Math.random()*1000);
                var price = Math.floor(Math.random()*1000);
                rows.push({
                    inv: 'Inv No '+i,
                    date: $.fn.datebox.defaults.formatter(new Date()),
                    name: 'Name '+i,
                    amount: amount,
                    price: price,
                    cost: amount*price,
                    note: '<a href="#">修改</a> <a href="#">删除</a> <a href="#">查看</a>'
                });
            }
            return rows;
        }
        
        function pagerFilter(data){
            if (typeof data.length == 'number' && typeof data.splice == 'function'){    // is array
                data = {
                    total: data.length,
                    rows: data
                }
            }
            var dg = $(this);
            var opts = dg.datagrid('options');
            var pager = dg.datagrid('getPager');
            pager.pagination({
                onSelectPage:function(pageNum, pageSize){
                    opts.pageNumber = pageNum;
                    opts.pageSize = pageSize;
                    pager.pagination('refresh',{
                        pageNumber:pageNum,
                        pageSize:pageSize
                    });
                    dg.datagrid('loadData',data);
                }
            });
            if (!data.originalRows){
                data.originalRows = (data.rows);
            }
            var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
            var end = start + parseInt(opts.pageSize);
            data.rows = (data.originalRows.slice(start, end));
            return data;
        }

        $(function(){
            $('#dg').datagrid({loadFilter:pagerFilter}).datagrid('loadData', getData());
        });
        
        function formatPrice(val,row){
            if (val < 600){
                return '<span style="color:red;">('+val+')</span>';
            } else {
                return val;
            }
        }
    </script>
    <form id="signupForm" method="get" action="">
    <p>
        <label for="firstname">Firstname</label>
        <input id="firstname" name="firstname" class="required" />
    </p>
 <p>
  <label for="email">E-Mail</label>
  <input id="email" name="email" class="required email" />
 </p>
 <p>
  <label for="password">Password</label>
  <input id="password" name="password" type="password" class="{required:true,minlength:5}" />
 </p>
 <p>
  <label for="confirm_password">确认密码</label>
  <input id="confirm_password" name="confirm_password" type="password" class="{required:true,minlength:5,equalTo:'#password'}" />
 </p>
    <p>
        <input class="submit" type="submit" value="Submit"/>
    </p>
</form>
  </body>
</html>
